<template>
  <div class="menu-content step-manage">
    <p class="right-title" style="display: flex;justify-content: space-between;">
      数据处理步骤
      <a style="color: #144FEC;font-size: 14px;" @click="goBack">返回上一级</a>
    </p>
    <div class="step">
      <w-steps :active="stepNo" finish-status="wait" align-center>
        <w-step v-for="(item,index) in stepData" :key="index" :title="item.stepName" @click.native="next(item)"></w-step>
      </w-steps>
    </div>
    <div class="content">
      <div class="left">
        <p class="right-title">数据处理步骤-环节清单</p>
        <div class="table">
          <w-table border :max-height="tableHeight" style="width: 99%" :data="tableData" @cell-click="editable"
            highlight-current-row>
            <!-- @row-click="rowClick" -->
            <!-- <w-table-column prop="sectionNo" label="步骤">
            </w-table-column> -->
            <w-table-column prop="sectionName" label="环节描述">
              <template slot-scope="{row,$index}">
                <div class="input-box" v-if="showSectionName[$index]">
                  <w-input size="small" @change="!row.add&&changeName(row)" v-model="row.sectionName"></w-input>
                  <!-- <w-select v-model="row.sectionName" filterable placeholder="请选择" @change="stepNameChange($event,row)" @blur="searchBlur">
                    <w-option v-for="item in stepOption" :key="item.id" :label="item.sectionName" :value="item.sectionName">
                    </w-option>
                  </w-select> -->
                </div>
                <span v-if="!showSectionName[$index]">{{row.sectionName}}</span>
              </template>
            </w-table-column>
            <w-table-column prop="isShare" label="共享">
              <template slot-scope="{row,$index}">
                <div class="input-box" v-if="showShare[$index]">
                  <w-select v-model="row.isShareName" placeholder="请选择" @change="shareChange(row)">
                    <w-option key="1" label="共享" value="共享">
                    </w-option>
                    <w-option key="0" label="私有" value="私有">
                    </w-option>
                  </w-select>
                </div>
                <span v-if="!showShare[$index]">{{row.isShareName}}</span>
              </template>
            </w-table-column>
            <w-table-column prop="handleType" label="类型">
              <template slot-scope="{row,$index}">
                <div class="input-box" v-if="showHandleType[$index]">
                  <w-select v-model="row.handleTypeName" placeholder="请选择" @change="handleChange(row)">
                    <w-option v-for="item in handleOptions" :key="item.id" :label="item.value" :value="item.value">
                    </w-option>
                  </w-select>
                </div>
                <span v-if="!showHandleType[$index]">{{row.handleTypeName}}</span>
              </template>
            </w-table-column>
            <w-table-column prop="conditionType" label="条件">
              <template slot-scope="{row,$index}">
                <div class="input-box" v-if="showConditionType[$index]">
                  <w-select v-model="row.conditionTypeName" placeholder="请选择" @change="conditionChange(row)">
                    <w-option v-for="item in conditionOptions" :key="item.id" :label="item.value" :value="item.value">
                    </w-option>
                  </w-select>
                </div>
                <span v-if="!showConditionType[$index]">{{row.conditionTypeName}}</span>
              </template>
            </w-table-column>
            <w-table-column prop="logicNo" label="序号">
              <template slot-scope="{row,$index}">
                <div class="input-box" v-if="!row.add&&showLogicNo[$index]">
                  <w-input size="small" @change="changeName(row)" v-model="row.logicNo"></w-input>
                </div>
                <span v-if="!showLogicNo[$index]">{{row.logicNo}}</span>
              </template>
            </w-table-column>
            <w-table-column prop="isChange" label="调整">
              <template slot-scope="{row,$index}">
                <div class="input-box" v-if="showchange[$index]">
                  <w-select v-model="row.isChangeName" placeholder="请选择" @change="Change(row)">
                    <w-option key="0" label="不调" value="不调"></w-option>
                    <w-option key="1" label="可调" value="可调"></w-option>
                    <w-option key="2" label="必调" value="必调"></w-option>
                  </w-select>
                </div>
                <span v-if="!showchange[$index]">{{row.isChangeName}}</span>
              </template>
            </w-table-column>
            <w-table-column prop="sort" label="排序">
              <template slot-scope="scope">
                <a class="up" v-if="!scope.row.add" @click="() => moveNode(scope,'up')">
                  <img src="../../static/img/up.png" />
                </a>
                <a class="down" v-if="!scope.row.add" @click="() => moveNode(scope,'down')">
                  <img src="../../static/img/down.png" />
                </a>
              </template>
            </w-table-column>
            <w-table-column prop="operator" label="操作">
              <template slot-scope="{row,$index}">
                <a title="详情" v-if="!row.add" class="detail" @click="openDrawer(row)"><i class="w-icon-list"></i></a>
                <a title="删除" v-if="!row.add" class="reduce" @click="reduce(row)"><i class="w-icon-delete"></i></a>
                <a title="添加" v-if="row.add" class="add" @click="add(row)"><i class="w-icon-plus"></i></a>
                <a title="复制" v-if="row.add" class="add" @click="copy(row)"><i class="w-icon-copy-solid"></i></a>
              </template>
            </w-table-column>
          </w-table>
        </div>
      </div>
      <w-drawer position="right" :visible.sync="visible" @onClose="handleClose">
        <div class="content-container right">
          <w-tabs v-model="activeName1" type="dark">
            <w-tab-pane label="参数" name="first">
              <w-table :max-height="paramHeight" border :data="tableData1" @cell-click="paramedit">
                <w-table-column prop="parameterName" label="参数名称">
                  <template slot-scope="{row,$index}">
                    <div class="input-box" v-if="showParameterName[$index]">
                      <w-input size="small" @change="!row.add&&changeParam(row)" v-model="row.parameterName"></w-input>
                    </div>
                    <span v-if="!showParameterName[$index]">{{row.parameterName}}</span>
                  </template>
                </w-table-column>
                <w-table-column prop="memo" label="说明">
                  <template slot-scope="{row,$index}">
                    <div class="input-box" v-if="showMemo[$index]">
                      <w-input size="small" @change="!row.add&&changeParam(row)" v-model="row.memo"></w-input>
                    </div>
                    <span v-if="!showMemo[$index]">{{row.memo}}</span>
                  </template>
                </w-table-column>
                <w-table-column prop="parameterType" label="数据类型">
                  <template slot-scope="{row,$index}">
                    <div class="input-box" v-if="showParameterType[$index]">
                      <w-select v-model="row.parameterTypeName" placeholder="请选择" @change="paramChange(row)">
                        <w-option v-for="item in paramOptions" :key="item.id" :label="item.value" :value="item.value">
                        </w-option>
                      </w-select>
                    </div>
                    <span v-if="!showParameterType[$index]">{{row.parameterTypeName}}</span>
                  </template>
                </w-table-column>
                <w-table-column prop="parameterLen" label="长度" width="100">
                  <template slot-scope="{row,$index}">
                    <div class="input-box" v-if="showParameterLen[$index]">
                      <w-input size="small" @change="!row.add&&changeParam(row)" v-model="row.parameterLen"></w-input>
                    </div>
                    <span v-if="!showParameterLen[$index]">{{row.parameterLen}}</span>
                  </template>
                </w-table-column>
                <w-table-column prop="defaultValue" label="默认值">
                  <template slot-scope="{row,$index}">
                    <div class="input-box" v-if="showDefaultValue[$index]">
                      <w-input size="small" @change="!row.add&&changeParam(row)" v-model="row.defaultValue"></w-input>
                    </div>
                    <span v-if="!showDefaultValue[$index]">{{row.defaultValue}}</span>
                  </template>
                </w-table-column>
                <w-table-column prop="operator" label="操作">
                  <template slot-scope="{row,$index}">
                    <a title="删除" v-if="!row.add" class="reduce" @click="reduce1(row)"><i class="w-icon-delete"></i></a>
                    <a title="添加" v-if="row.add" class="add" @click="add1(row)"><i class="w-icon-plus"></i></a>
                  </template>
                </w-table-column>
              </w-table>
            </w-tab-pane>
            <w-tab-pane label="SQL语句" name="second">
              <!-- <w-input @change="sqlChange" resize="none" class="sql-textarea" v-model="sqlContext" type="textarea"
                :rows="4" :maxlength="300" showCounter></w-input> -->
              <div id="wangeditor">
                <div ref="editorElem" style="text-align:left;"></div>
              </div>
              <div style="text-align: right;margin-top: 30px;">
                <w-button size="large" type="primary" @click="submitSql">提交</w-button>
              </div>
            </w-tab-pane>
            <w-tab-pane label="涉及指标" name="third">
              <div style="margin-bottom: 20px;">
                <!-- <w-input placeholder="请输入指标分类名称" style="width:20%;margin-right: 20px;" v-model="zbflName"></w-input> -->
                <w-select v-model="zbflName" placeholder="请选择" @change="zbflChange">
                  <w-option v-for="item in zbflOptions" :key="item.zbflId" :label="item.zbflName" :value="item.zbflName">
                  </w-option>
                </w-select>
                <w-input placeholder="请输入指标名称" style="width:20%;margin-right: 20px;" v-model="zbName"></w-input>
                <w-button type="primary" @click="search">搜索</w-button>
              </div>
              <w-table ref="indexTable" :max-height="divHeight" class="target" border :data="targetData" style="width: 100%"
                @select="selectFun" @select-all="handleSelectionChange">
                <!-- @select-all="handleSelectionChange" -->
                <w-table-column type="selection" width="50">
                </w-table-column>
                <w-table-column prop="zbId" label="指标ID">
                </w-table-column>
                <w-table-column prop="zbName" label="指标名称" width="300">
                </w-table-column>
                <w-table-column prop="zbflId" label="指标分类ID">
                </w-table-column>
                <w-table-column prop="zbflName" label="指标分类名称" width="300">
                </w-table-column>
              </w-table>
              <div v-if="targetData.length>0" class="pagination clearfix" style="text-align: right;margin-top: 30px;">
                <w-pagination :total="total" :page-size="15" @actived-change="currentChange"></w-pagination>
              </div>
            </w-tab-pane>
          </w-tabs>
        </div>
      </w-drawer>
    </div>
    <w-modal :visible.sync="stepVisible" :title="title" width="70%">
      <w-table max-height="350" class="shareTable" ref="shareTable" border :data="shareData" style="width: 100%">
        <w-table-column label="" width="50">
          <template slot-scope="scope">
            <w-radio class="radio" v-model="radio" :label="scope.$index" @change.native="getCurrentRow(scope)">
              &nbsp;
            </w-radio>
          </template>
        </w-table-column>
        <w-table-column prop="stepName" label="步骤名称" width="200">
        </w-table-column>
        <w-table-column prop="sectionName" label="环节名称" width="200">
        </w-table-column>
        <w-table-column class-name="sql" prop="sqlContext" label="SQL语句">
          <template slot-scope="{row,$index}">
            <div v-html="row.sqlContext"></div>
          </template>
        </w-table-column>
      </w-table>
      <span slot="footer" class="dialog-footer">
        <w-button @click="stepVisible = false">取 消</w-button>
        <w-button type="primary" @click="sureStep">确 定</w-button>
      </span>
    </w-modal>
  </div>
</template>
<script>
  import E from "wangeditor";
  export default {
    components: {

    },
    data() {
      return {
        total: 0,
        pagesize: 15,
        currentPage: 1,
        radio: false,
        stepVisible: false,
        title: '选择共享的环节',
        editor: null,
        editorContent: '',
        procId: this.$route.query.procId,
        name: this.$route.query.name,
        stepId: this.$route.query.stepId,
        stepName: this.$route.query.stepName,
        stepNo: this.$route.query.stepNo - 1,
        stepData: [],
        active1: 0,
        activeName1: 'first',
        showSectionName: [],
        showShare: [],
        showHandleType: [],
        showConditionType: [],
        showLogicNo: [],
        showchange: [],
        showParameterName: [],
        showMemo: [],
        showParameterType: [],
        showParameterLen: [],
        showDefaultValue: [],
        handleOptions: [],
        conditionOptions: [],
        paramOptions: [],
        tableData: [],
        tableData1: [],
        sectionId: '',
        sectionName: '',
        sqlContext: '',
        visible: false,
        isSqlChange: false,
        targetData: [],
        divHeight: document.documentElement.clientHeight - 250,
        tableHeight: document.documentElement.clientHeight - 300,
        paramHeight: document.documentElement.clientHeight - 100,
        section: [],
        zbName: '',
        zbflName: '',
        shareData: [],
        stepNameValue: '',
        stepRow: {},
        selection: [],
        isAllChoose: false,
        zbflOptions: [],
        zbflId: '',
        conditionType: '',
        conditionTypeName: '',
      };
    },
    mounted() {
      this.editor = new E(this.$refs.editorElem);
      // 编辑器的事件，每次改变会获取其html内容
      this.editor.customConfig.onchange = html => {
        this.editorContent = html;
      };
      this.editor.customConfig.menus = [
        // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'justify', // 对齐方式
        'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ];
      this.editor.create(); // 创建富文本实例
    },
    watch: {

    },
    created() {
      this.getHandleData()
      this.getConditionData()
      this.getParamOptionsData()

      this.getStep()
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      //获取涉及指标数据
      getZbflData() {
        this.$Http
          .post("etlProcedureIndicatorMap/findGroupByZbfl", {
            id: ''
          })
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              content.unshift({
                zbflId: "",
                zbflName: "全部"
              })
              this.zbflOptions = content
              this.zbflName = content[0].zbflName
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      zbflChange(val) {
        this.zbflOptions.map((item, index) => {
          if (item.zbflName == val) {
            this.zbflId = item.zbflId
          }
        })
        this.getTargetData()
      },
      currentChange(currentPage) {
        this.currentPage = currentPage;
        this.getTargetData()
      },
      //弹框确定按钮
      sureStep() {
        console.log('this.stepRow', this.stepRow)
        // this.stepRow.id = ''
        // this.add(this.stepRow)
        let param = {
          id: this.stepRow.id,
          sectionName: this.stepRow.sectionName,
          procId: this.procId,
          procName: this.name,
          stepId: this.stepId,
          stepName: this.stepName,
          isShare: '0',
          handleType: this.stepRow.handleType,
          conditionType: this.conditionType,
          // logicNo: row.logicNo,
          isChange: '1',
        }
        this.$Http
          .post("etlProdSecInfo/copyInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success('复制成功~')
              this.stepVisible = false
              this.getProceData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      getCurrentRow(row) {
        this.stepRow = row.row
      },
      //获取环节描述数据
      getShareInfo() {
        this.$Http
          .post("etlProdSecInfo/findShareList", {
            isShare: 1
          })
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.shareData = content
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      copy() {
        this.stepVisible = true
        this.getShareInfo()
      },
      submitSql() {
        this.sqlContext = this.editorContent
        this.isSqlChange = true
        let param = {
          sqlContext: this.sqlContext,
          id: this.sectionId
        }
        this.$Http
          .post("etlProdSecInfo/updateSql", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success('sql编辑成功')
              this.setShowEditInit()
              this.getProceData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      search() {
        this.getTargetData()
      },
      selectFun(selection, row) {
        if (row.status == 1) {
          this.checkIndex(row.zbId, row.zbName, 0) //取消勾选
        } else {
          this.checkIndex(row.zbId, row.zbName, 1) //勾选
        }
      },
      handleSelectionChange(val) {
        if (val.length > 0) {
          this.isAllChoose = true
        } else {
          this.isAllChoose = false
        }
        this.checkIndexs()
      },
      //多个勾选指标
      checkIndexs() {
        var arr = []
        if (this.isAllChoose == true) {
          this.targetData.map((item, index) => {
            arr.push({
              zbId: item.zbId,
              zbName: item.zbName,
              sectionId: this.sectionId,
              sectionName: this.sectionName,
              status: 1,
              procId: this.procId,
              procName: this.name,
              stepId: this.stepId,
              stepName: this.stepName
            })
          })
        } else {
          this.targetData.map((item, index) => {
            arr.push({
              zbId: item.zbId,
              zbName: item.zbName,
              sectionId: this.sectionId,
              sectionName: this.sectionName,
              status: 0,
              procId: this.procId,
              procName: this.name,
              stepId: this.stepId,
              stepName: this.stepName
            })
          })
        }
        this.$Http
          .post("etlProdSecIndicInfo/saveOrDeletes", arr)
          .then(response => {
            if (response.data.response.code == "1") {
              // this.getTargetData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //勾选指标
      checkIndex(zbId, zbName, status) {
        let param = {
          zbId: zbId,
          zbName: zbName,
          sectionId: this.sectionId,
          sectionName: this.sectionName,
          status: status,
          procId: this.procId,
          procName: this.name,
          stepId: this.stepId,
          stepName: this.stepName
        }
        this.$Http
          .post("etlProdSecIndicInfo/saveOrDelete", param)
          .then(response => {
            if (response.data.response.code == "1") {
              // this.getTargetData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      openDrawer(row) {
        this.visible = true
        this.activeName1 = 'first'
        this.setShowEditInit()
        this.rowClick(row)
        this.getTargetData()
        this.getZbflData()
      },
      handleClose() {
        this.visible = false
      },
      getStep() {
        let param = {
          procId: this.procId
        }
        this.$Http
          .post("etlProdStepInfo/findetlProcedureStepInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.stepData = content
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      sqlChange(value) {
        this.sqlContext = value
        this.isSqlChange = true
        let param = {
          sqlContext: this.sqlContext,
          id: this.sectionId
        }
        this.$Http
          .post("etlProdSecInfo/updateSql", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success('sql编辑成功')
              this.setShowEditInit()
              this.getProceData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      changeName(row) {
        if (!row.add) {
          this.editProceData(row)
        }
      },
      changeParam(row) {
        this.editParamData(row)
      },
      //获取类型数据
      getHandleData() {
        let param = {
          typeCode: "CLLX"
        }
        this.$Http
          .post("tableDicInfo/findTableDicInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.handleOptions = content
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //获取条件数据
      getConditionData() {
        let param = {
          typeCode: "TJLX"
        }
        this.$Http
          .post("tableDicInfo/findTableDicInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.conditionOptions = content
              this.conditionType = content[0].id
              this.conditionTypeName = content[0].value
              this.getProceData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //获取类型数据
      getParamOptionsData() {
        let param = {
          typeCode: "ZDSJLX"
        }
        this.$Http
          .post("tableDicInfo/findTableDicInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.paramOptions = content
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //修改共享
      shareChange(row) {
        var isShare = ''
        if (row.isShareName == '共享') {
          isShare = '1'
        } else if (row.isShareName == '私有') {
          isShare = '0'
        }
        row.isShare = isShare
        if (!row.add) {
          this.editProceData(row)
        }
      },
      //修改调整
      Change(row) {
        var isChange = ''
        if (row.isChangeName == '不调') {
          isChange = '0'
        } else if (row.isChangeName == '可调') {
          isChange = '1'
        } else if (row.isChangeName == '必调') {
          isChange = '2'
        }
        row.isChange = isChange
        if (!row.add) {
          this.editProceData(row)
        }
      },
      //修改类型
      handleChange(row) {
        var handleType = ''
        this.handleOptions.map((i, k) => {
          if (i.value == row.handleTypeName) {
            handleType = i.id
          }
        })
        row.handleType = handleType
        if (!row.add) {
          this.editProceData(row)
        }
      },
      //修改条件
      conditionChange(row) {
        var conditionType = ''
        this.conditionOptions.map((i, k) => {
          if (i.value == row.conditionTypeName) {
            conditionType = i.id
          }
        })
        row.conditionType = conditionType
        if (!row.add) {
          this.editProceData(row)
        }
      },
      //修改参数类型
      paramChange(row) {
        var parameterType = ''
        this.paramOptions.map((i, k) => {
          if (i.value == row.parameterTypeName) {
            parameterType = i.id
          }
        })
        row.parameterType = parameterType
        if (!row.add) {
          this.editParamData(row)
        }

      },
      next(item) {
        this.stepNo = item.stepNo - 1
        this.stepId = item.id
        this.stepName = item.stepName
        this.getProceData()
      },
      //获取环节表格数据
      getProceData() {
        let param = {
          procId: this.procId,
          procName: this.name,
          stepId: this.stepId,
          stepName: this.stepName
        }
        this.$Http
          .post("etlProdSecInfo/findetlProcedureSectionInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.tableData = content
              this.tableData.push({
                id: '',
                sectionName: '',
                isShare: 0,
                isShareName: '私有',
                handleType: '',
                conditionType: this.conditionType,
                conditionTypeName: this.conditionTypeName,
                logicNo: '',
                isChange: 1,
                isChangeName: '可调',
                add: 'true'
              })
              if (content.length > 0) {
                if (!this.isSqlChange) {
                  this.sectionId = content[0].id
                  this.sectionName = content[0].sectionName
                }
              }
              this.getProceParamData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //编辑表格数据
      editProceData(info) {
        let param = {
          id: info.id ? info.id : '',
          sectionName: info.sectionName ? info.sectionName : '',
          procId: this.procId,
          procName: this.name,
          stepId: this.stepId,
          stepName: this.stepName,
          isShare: info.isShare ? info.isShare : '',
          handleType: info.handleType ? info.handleType : '',
          conditionType: info.conditionType ? info.conditionType : '',
          logicNo: info.logicNo ? info.logicNo : '',
          isChange: info.isChange ? info.isChange : '',
        }
        this.$Http
          .post("etlProdSecInfo/update", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success('编辑成功~')
              this.setShowEditInit()
              this.getProceData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //点击添加步骤
      add(row) {
        if (!row.sectionName) {
          this.$message.error('请输入环节描述')
        } else if (!row.isShareName) {
          this.$message.error('请选择共享')
        } else if (!row.handleTypeName) {
          this.$message.error('请选择类型')
        } else if (!row.conditionTypeName) {
          this.$message.error('请选择条件')
        }
        // else if (!row.logicNo) {
        //   this.$message.error('请输入序号')
        // }
        else if (!row.isChangeName) {
          this.$message.error('请选择调整')
        } else {
          let param = {
            id: '',
            sectionName: row.sectionName,
            procId: this.procId,
            procName: this.name,
            stepId: this.stepId,
            stepName: this.stepName,
            isShare: row.isShare,
            handleType: row.handleType,
            conditionType: row.conditionType,
            // logicNo: row.logicNo,
            isChange: row.isChange,
          }
          this.$Http
            .post("etlProdSecInfo/save", param)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('新增成功~')
                this.setShowEditInit()
                this.getProceData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      //点击删除步骤
      reduce(row) {
        this.$confirm('确认删除此条环节吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$Http
            .get("etlProdSecInfo/delete/" + row.id)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('删除成功~')
                this.setShowEditInit()
                this.getProceData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }).catch(() => {

        });
      },
      //点击表格每一行
      rowClick(row, event, column) {
        if (!row.add) {
          this.setShowEditInit()
          this.sectionId = row.id
          this.sectionName = row.sectionName
          if (row.sqlContext) {
            this.editor.txt.html(row.sqlContext)
          } else {
            this.editor.txt.html('')
          }
          this.getProceParamData()
          this.sqlContext = row.sqlContext
        }
      },
      //获取涉及指标数据
      getTargetData() {
        let param = {
          sectionId: this.sectionId,
          zbName: this.zbName,
          zbflId: this.zbflId,
          procName: this.name,
          page: this.currentPage,
          // rows: this.pagesize
        }

        this.$Http
          .post("etlProcedureIndicatorMap/findtableListInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.targetData = content.records
              this.total = content.total
              this.$nextTick(() => {
                this.targetData.forEach(row => {
                  if (row.status == 1) {
                    this.$refs.indexTable.toggleRowSelection(row, true);
                  }
                })
              })
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //获取环节参数表格数据
      getProceParamData() {
        let param = {
          sectionId: this.sectionId
        }
        this.$Http
          .post("prodSecParamInfo/findtableListInfo", param)
          .then(response => {
            if (response.data.response.code == "1") {
              let content = response.data.response.data;
              this.tableData1 = content
              this.tableData1.push({
                id: '',
                stepName: '',
                stepNo: '',
                add: 'true'
              })
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //编辑环节参数表格数据
      editParamData(info) {
        let param = {
          "memo": info.memo ? info.memo : '',
          "id": info.id ? info.id : '',
          "parameterLen": info.parameterLen ? info.parameterLen : '',
          "parameterName": info.parameterName ? info.parameterName : '',
          "parameterType": info.parameterType ? info.parameterType : '',
          "sectionId": this.sectionId,
          "defaultValue": info.defaultValue ? info.defaultValue : ''
        }
        this.$Http
          .post("prodSecParamInfo/update", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success('编辑成功~')
              this.setShowEditInit1()
              this.getProceParamData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      //参数点击添加步骤
      add1(row) {
        if (!row.parameterName) {
          this.$message.error('请输入参数名称')
        } else if (!row.memo) {
          this.$message.error('请输入说明')
        } else if (!row.parameterTypeName) {
          this.$message.error('请选择数据类型')
        } else if (!row.parameterLen) {
          this.$message.error('请输入长度')
        } else if (!row.defaultValue) {
          this.$message.error('请输入默认值')
        } else {
          let param = {
            id: '',
            parameterName: row.parameterName,
            memo: row.memo,
            parameterType: row.parameterType,
            parameterLen: row.parameterLen,
            defaultValue: row.defaultValue,
            sectionId: this.sectionId
          }
          this.$Http
            .post("prodSecParamInfo/save", param)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('新增成功~')
                this.setShowEditInit1()
                this.getProceParamData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      //参数点击删除步骤
      reduce1(row) {
        this.$confirm('确认删除此条参数吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$Http
            .get("prodSecParamInfo/delete/" + row.id)
            .then(response => {
              if (response.data.response.code == "1") {
                this.$message.success('删除成功~')
                this.setShowEditInit1()
                this.getProceParamData()
              } else {
                if (response.data.response.msg) {
                  this.$message.error(response.data.response.msg)
                }
              }
            })
            .catch(error => {
              console.log(error);
            });
        }).catch(() => {

        });
      },
      // 初始化单元格显示状态
      setShowEditInit1() {
        this.showParameterName.map((item, index) => {
          this.showParameterName[index] = false
        })
        this.showMemo.map((item, index) => {
          this.showMemo[index] = false
        })
        this.showParameterType.map((item, index) => {
          this.showParameterType[index] = false
        })
        this.showParameterLen.map((item, index) => {
          this.showParameterLen[index] = false
        })
        this.showDefaultValue.map((item, index) => {
          this.showDefaultValue[index] = false
        })
      },
      // 初始化单元格显示状态
      setShowEditInit() {
        this.showSectionName.map((item, index) => {
          this.showSectionName[index] = false
        })
        this.showShare.map((item, index) => {
          this.showShare[index] = false
        })
        this.showHandleType.map((item, index) => {
          this.showHandleType[index] = false
        })
        this.showConditionType.map((item, index) => {
          this.showConditionType[index] = false
        })
        this.showLogicNo.map((item, index) => {
          this.showLogicNo[index] = false
        })
        this.showchange.map((item, index) => {
          this.showchange[index] = false
        })
      },
      //单击单元格事件
      editable(row, column, cell, event, index) {
        this.setShowEditInit()
        let nowObj = column.property
        var index = this.tableData.findIndex((item) => {
          return item.id === row.id
        })
        if (nowObj == 'sectionName') {
          this.showSectionName[index] = true
          this.$set(this.showSectionName, index, true)
        } else if (nowObj == 'isShare') {
          this.showShare[index] = true
          this.$set(this.showShare, index, true)
        } else if (nowObj == 'handleType') {
          this.showHandleType[index] = true
          this.$set(this.showHandleType, index, true)
        } else if (nowObj == 'conditionType') {
          this.showConditionType[index] = true
          this.$set(this.showConditionType, index, true)
        } else if (nowObj == 'logicNo') {
          this.showLogicNo[index] = true
          this.$set(this.showLogicNo, index, true)
        } else if (nowObj == 'isChange') {
          this.showchange[index] = true
          this.$set(this.showchange, index, true)
        }
      },
      //单击单元格事件
      paramedit(row, column, cell, event, index) {
        this.setShowEditInit1()
        let nowObj = column.property
        var index = this.tableData1.findIndex((item) => {
          return item.id === row.id
        })
        if (nowObj == 'parameterName') {
          this.showParameterName[index] = true
          this.$set(this.showParameterName, index, true)
        } else if (nowObj == 'memo') {
          this.showMemo[index] = true
          this.$set(this.showMemo, index, true)
        } else if (nowObj == 'parameterType') {
          this.showParameterType[index] = true
          this.$set(this.showParameterType, index, true)
        } else if (nowObj == 'parameterLen') {
          this.showParameterLen[index] = true
          this.$set(this.showParameterLen, index, true)
        } else if (nowObj == 'defaultValue') {
          this.showDefaultValue[index] = true
          this.$set(this.showDefaultValue, index, true)
        }
      },
      // 上移 下移
      moveNode(node, type) {
        if (type === 'up') {
          if (node.$index == 0) {
            this.$message.warning('当前已为表格最顶层，不可再上移')
            return false
          }
        } else if (type === 'down') {
          if (node.$index == this.tableData.length - 2) {
            this.$message.warning('当前已为表格最底层，不可再下移')
            return false
          }
        }

        let param = {
          procId: this.procId,
          stepId: node.row.stepId,
          sectionNo: node.row.sectionNo,
          direction: type == 'up' ? 1 : 2,
          id: node.row.id,
          logicNo: node.row.logicNo,
        }
        this.$Http
          .post("etlProdSecInfo/exchangeList", param)
          .then(response => {
            if (response.data.response.code == "1") {
              this.$message.success(`${type == 'up' ? '上移' : '下移'}成功`)
              this.setShowEditInit()
              this.getProceData()
            } else {
              if (response.data.response.msg) {
                this.$message.error(response.data.response.msg)
              }
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    destroyed() {}
  };
</script>

<style scoped lang="scss">
  .step-manage {
    padding: 10px;
    box-sizing: border-box;

    .step {
      width: 60%;
      margin: 20px auto;
    }

    .content {
      display: flex;

      .left,
      .right {
        flex: 1;
      }

      .table {
        margin-top: 30px;
      }

      .sql-textarea,
      .sql-textarea .w-textarea__inner {
        height: 300px;
      }
    }

    .content-container {
      width: 945px;
      padding: 15px;
      box-sizing: border-box;
    }
  }
</style>
